/* 
● 当用户没有任何输入时，提示框消失
● 当用户输入字符后，显示提示框，并且把用户输入的内容自动拼上邮箱后缀进行显示
● 暂时不用考虑示意图中的红色和蓝色背景色的逻辑
● 注意用户输入中前后空格需要去除 
*/

// // 滞后
// emailInput.addEventListener('keydown', function () {
//   console.log('keydown', emailInput.value);
// })
// // 滞后
// emailInput.addEventListener('keypress', function () {
//   console.log('keypress', emailInput.value);
// })
// // 按住不撒手的时候不触发
// emailInput.addEventListener('keyup', function () {
//   console.log('keyup', emailInput.value);
// })
// var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
let lis
let currentIndex = 0
let sugLength = postfixList.length

emailInput.focus()
//根据输入框中内容的改变做相应的处理
emailInput.addEventListener('input', function () {
  // 获取用户输入
  const value = getUserInput()
  // 跟据用户输入的内容获取提示数组
  const sugList = getSugList(value)
  // 根据提示数组生成li插入到ul中
  insertSug(sugList)
  // 根据输入框中内容的有无切换提示框的显示状态
  toggleSugDisplay(value)
})


// 点击选择提示项
emailSug.addEventListener('click', function (e) {
  const target = e.target
  if (target.tagName === 'LI') {
    confirmSug(target)
  }
})

// 键盘选择
emailInput.addEventListener('keydown', function (e) {
  if (e.keyCode === 38) { //上
    currentIndex = currentIndex > 0 ? currentIndex - 1 : sugLength - 1
    changeActive()
  } else if (e.keyCode === 40) {//下
    currentIndex = currentIndex < sugLength - 1 ? currentIndex + 1 : 0
    changeActive()
  } else if (e.keyCode === 13) {//回车
    confirmSug(lis[currentIndex])
  } else if (e.keyCode === 27) {
    emailInput.select()
  }
})

/**
 * @description: 拿到input输入框的输入内容trim后返回
 * @return {*}: 去掉前后空格后的输入框中的内容
 */
function getUserInput() {
  return emailInput.value.trim();
}

/**
 * @description: 生成提示框中的提示内容
 * @return {*} 拼接好后缀的数组
 * @param {*} value 输入框中的内容
 */
function getSugList(value) {
  let suffix = ''
  // 获取用户输入 value
  if (value.includes('@')) {
    // 当用户输入含有 @ 符号时，我们选取用户输入的@前面的字符来和后缀拼接
    const i = value.indexOf('@')
    // 先获取后缀再修改value
    suffix = value.substring(i + 1)
    value = value.substring(0, i)
  }
  // 获取筛选后的后缀
  const newPostfixList = postfixList.filter(item => {
    return item.includes(suffix)
  })
  let list
  if (newPostfixList.length > 0) {
    // 筛选后的结果
    list = newPostfixList
    sugLength = newPostfixList.length
  } else {
    // 原本所有的后缀
    list = postfixList
    sugLength = postfixList.length
  }
  // 返回生成的提示内容
  return list.map((item) => {
    // 遍历postfixList , 把用户输入和每一个postfix进行结合成为每一个Li
    return value + '@' + item
  })
}

/**
 * @description: 将内容添加到email-sug-wrapper中
 * @param {*} list 拼接好后缀的数组
 */
function insertSug(list) {
  // 每次更新前先清空老数据
  emailSug.innerHTML = ''
  // 获取生成提示框中的提示内容
  // 将内容添加到email-sug-wrapper中
  list.forEach((item, index) => {
    const li = document.createElement('li')
    li.innerHTML = item
    if (index === 0) {
      li.className = 'active'
    }
    emailSug.appendChild(li)
  })
  lis = document.querySelectorAll('#email-sug-wrapper li')
}

/**
 * @description: 根据输入框中内容的有无切换提示框的显示状态
 * @param {*} value 输入框中的内容
 */
function toggleSugDisplay(value) {
  if (value === '') {
    closeSug()
  } else {
    openSug()
  }
}

function closeSug() {
  emailSug.style.display = 'none'
}

function openSug() {
  emailSug.style.display = 'block'
}

/**
 * @description: 把 Li 对应的提示内容，放在输入框中，同时隐藏提示框
 * @param {*} ele 点击的li
 */
function confirmSug(ele) {
  emailInput.value = ele.innerHTML
  closeSug()
  currentIndex = 0
  emailInput.focus()
}

/**
 * @description:  切换激活的li
 */
function changeActive() {
  // 先清空
  for (let i = 0; i < lis.length; i++) {
    lis[i].className = ''
  }
  // 给对应索引的li加active
  console.log(lis);
  lis[currentIndex].className = 'active'
}




// const arr1 = ['1', '2', '3']

// console.log(arr1.map((item) => {
//   return 'map' + item
// }));
// console.log(arr1.filter((item) => {
//   return item > 1
// }));